<!--
//
// TableSearchBar.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/11.
//
-->
<template>
    <div class="TableSearchBar">
        <div v-if="title" class="title">{{ title }}</div>
        <template v-else>
            <slot name="title"></slot>
        </template>
        <el-form
                ref="form"
                :model="model"
                class="form"
                inline
                label-position="left"
                size="default"
                style="display: block"
                :style="formStyle"
        >
            <el-form-item v-if="hasBefore">
                <slot name="before"></slot>
                <el-divider direction="vertical" style="height: 30px;"></el-divider>
            </el-form-item>

            <template v-if="!hideSearch">
                <table-search-item @change="onChange" :list="source.normal" :model="model"/>
<!--                <div v-if="source.normal.length === 0" class="message">筛选区域未配置条件，或筛选条件全部配置了更多，请从更多种提取为默认显示，如当前页面不需要筛选功能，请将 table-search-bar 组件的 hide-search="true"</div>-->
                <transition name="showMore">
                    <a v-show="state.isMore">
                        <table-search-item :list="source.inMore" :model="model"/>
                    </a>
                </transition>
                <el-form-item>
                    <el-button type="primary" plain @click="searchClick">
                        <b-icon name="bi-search" size="14" style="padding-right: 6px"/>
                        搜索
                    </el-button>
                    <el-button @click="resetClick">
                        <b-icon name="bi-arrow-clockwise" size="16" style="padding-right: 6px"/>
                        重置
                    </el-button>
                    <slot name="button"></slot>
                    <template v-if="source.inMore.length > 0">
                        <el-button v-if="state.isMore" link type="primary" @click="isMoreClick">
                            <b-icon name="bi-chevron-up" size="14" style="padding-right: 6px"/>
                            收起
                        </el-button>
                        <el-button v-else link type="primary" @click="isMoreClick">
                            <b-icon name="bi-chevron-down" size="14" style="padding-right: 6px"/>
                            更多
                        </el-button>
                    </template>
                </el-form-item>
            </template>
        </el-form>
        <slot></slot>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted, useSlots} from "vue";
import TableSearchItem from "./TableSearchItem.vue";

const config = {
    label: "", // label
    component: "el-input|el-select|el-date-picker|el-date-picker-datetime", // 组件类型，如需扩展其他类型，请自行实现当前 TableSearchItem 组件内的对应类型功能
    data: [], // el-select 的数据源 [{name: '', value: 0}]
    inMore: false, // 是否显示在更多里面
    format: "YYYY-MM-DD", // el-date-picker | el-date-picker-datetime 时候的日期格式 默认 YYYY-MM-DD|YYYY-MM-DDTHH:mm:ss
    props: {}, // 树下拉选择配置项
}

const props = defineProps({
    title: {
        type: String,
        default: () => ""
    },
    model: {
        type: Object,
        default: () => {
        }
    },
    config: {
        type: Object,
        default: () => {
        }
    },
    hideSearch: {
        type: Boolean,
        default: () => false
    },
    isMore: {
        type: Boolean,
        default: () => false
    },
    reset: {
        type: Function,
    },
    formStyle: {
        type: String,
    }
});
const emits = defineEmits(["update:value", "search"]);

const hasBefore = computed(() => {
    const slots = useSlots();
    return !!slots.before
})

// 响应式数据
const state = reactive({
    isMore: false
})

// 筛选项
const source = computed(() => {
    const normal = [];
    const inMore = [];
    for (const field in props.config) {
        const conf = props.config[field];
        conf.field = field;
        if (conf.component === 'el-select') {
            if (!conf.data || conf.data.length === 0) {
                console.danger("TableSearchBar", conf.component + `类型需配置 data, 当前字段：${conf.field}`)
                break;
            }
        }
        if (conf.inMore) {
            inMore.push(conf)
        } else {
            normal.push(conf)
        }
    }
    return {normal, inMore}
})

// 点击搜索
function searchClick() {
    emits("search", props.model);
}

// 点击重置
function resetClick() {
    if (props.reset) {
        const resetData = props.reset(props.model);
        Object.keys(props.model).forEach(key => {
            props.model[key] = resetData[key];
        })
    } else {
        Object.keys(props.model).forEach(key => {
            if (Array.isArray(props.model[key])) {
                props.model[key] = [];
            } else {
                props.model[key] = undefined;
            }
            // props.model[key] = undefined;
        })
    }
    searchClick()
}

// 点击更多
function isMoreClick() {
    state.isMore = !state.isMore;
}

function onChange() {
    searchClick()
}

onMounted(() => {
    state.isMore = props.isMore;
})
</script>

<style lang="scss">
.TableSearchBar {
    padding: 10px;
    background: #fff;
    box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-left: 4px solid var(--el-menu-active-color);

    .title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }

    .form {
        padding-top: 15px;
    }

    .el-form-item {
        margin-bottom: 10px;
    }

    .message {
        padding: 10px 0;
        margin-right: 10px;
        font-size: 14px;
        color: var(--el-color-warning);
    }

}

.showMore-enter-active {
    transition: opacity 0.5s ease;
}

.showMore-leave-active {
    transition: opacity 0.1s ease;
}

.showMore-enter-from,
.showMore-leave-to {
    opacity: 0;
}
</style>
